<template>
  <div
    v-if="gameJson.length > 0"
    class="grid grid-cols-3 gap-[10px]"
  >
    <a
      v-for="(item, index) in gameJson"
      :key="index"
      :href="getTargetUrl(`/gameDetail?gameId=${item.id}`)"
      @click="handleClickTrack(item)"
      :class="[
        'w-full bg-[#00000050] rounded-[10px] overflow-hidden aspect-square cursor-pointer',
        openBig && index % 12 === 0 && 'col-span-2 row-span-2',
        openBig && index % 12 === 7 && 'col-span-2 row-span-2',
      ]"
    >
      <XMImg
        :src="item.icon"
        class="w-full h-full object-cover"
      />
    </a>
    <XMAd
      v-for="(item, index) in cateDetailDisplayList"
      v-if="openAd"
      :key="index"
      :gamDefineSlot="item"
      class="col-[1/-1]"
      :style="{ gridRow: (index + 1) * 8 }"
    />
  </div>
  <XMEmpty v-else />
</template>

<script lang="ts" setup>
import { useConfigStore } from "~/composables/useConfigStore";
import { useGA } from "~/composables/useGA";

const {
  gameJson = [],
  openBig = false,
  openAd = false,
} = defineProps<{
  /** 游戏数据列表 */
  gameJson: GameJson[];
  /** 是否开启大图 */
  openBig?: boolean;
  /** 是否开启广告 */
  openAd?: boolean;
}>();
const { trackEvent } = useGA();
const { config } = useConfigStore();
const { gamConfig: { cateDetailDisplayList } = {} } = config.value;

const handleClickTrack = (item: GameJson) => {
  const { name } = item;
  trackEvent({
    eventName: "Click_Icon",
    params: {
      Game: name,
    },
  });
};
</script>

<style scoped></style>
